<template>
  <div class="">
    <my-input v-model="title"></my-input>
    <my-nav :list="navList" @select="select"></my-nav>
    <my-list :conlist="conlist"></my-list>
    <a href="#" class="totop"> <span>回到顶部</span></a>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import myInput from "../components/myInput.vue";
import myNav from "../components/myNav.vue";
import myList from "../components/myList.vue";
import navList from "../../public/nav.json";
import { getList } from "../utils/api.js";
//引入获取列表数据的api请求方法
export default {
  setup(props, ctx) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const data = reactive({
      title: "",
      conlist: [],
    });
    const select = (val) => {
      console.log(val);
      getList({ tab: val }).then((res) => {
        console.log(res);
        data.conlist = res.data;
      });
    };
    //点击tab的时候 请求列表数据 select事件是在子组件触发的
    select(localStorage.getItem("desc"));
    //本地存储里存的是谁进入页面就筛选谁的数据

    return { ...toRefs(data), navList, select };
  },
  components: {
    myInput,
    myNav,
    myList,
  },
};
</script>

<style lang="scss">
.totop {
  background: greenyellow;
  position: fixed;
  right: 20px;
  bottom: 20px;
}
</style>
